<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
        div{
        	width:150px;height:150px;margin:30px;background:red;float: left;opacity: 0.3;
        }
	</style>
	<script type="text/javascript">
	    //加物体加事件
	    window.onload = function(){
	    	var oDiv = document.getElementsByTagName('div');
	    	//循环div数组，给每个div加事件
	    	
	    	for(var i=0;i<oDiv.length;i++){
	    		oDiv[i].alpha = 30;  //当做物体属性保存
	    		oDiv[i].onmouseover = function(){
	    			startMove(this,100);
	    		}
	    		oDiv[i].onmouseout = function(){
	    			startMove(this,30);
	    		}
	    	}
	    }
        //运动框架
        //声明一个变量，透明度
        //var alpha = 30;   //注意：在多运动框架里，所有东西都不能公用，但是可以当做属性加到物体上
        var timer = null;
        function startMove(obj,iTarget){
        	clearInterval(obj.timer);
        	obj.timer = setInterval(function(){
        		//计算渐变速度
        		var speed = (iTarget-obj.alpha)/6;
                speed = speed>0?Math.ceil(speed):Math.floor(speed); //速度取整

                //当运动的透明度和目标值相等，说明运动结束
                if(obj.alpha == iTarget){
                	clearInterval(obj.timer);  //清除定时器，停止运动
                }else{
                	obj.alpha += speed;//反之，透明度 = 当前透明度 + 渐变速度
                	obj.style.opacity = obj.alpha/100;  //显示最后的透明度
                }

        	}, 30);
            
        }
	</script>
</head>
<body>
    
    <div></div>
    <div></div>
    <div></div>
    <div></div>
	
</body>
</html>